<template>
  <div class="list-query-con">
    <el-form
      :inline="true"
      :model="formData"
      label-position="left"
      label-width="0.9rem"
      class="list-query-form-inline"
    >
      <el-form-item label="任务名称">
        <el-input
          v-model="formData.jobName"
          placeholder="请输入"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="组名">
        <el-input
          v-model="formData.jobGroup"
          placeholder="请输入"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="任务类型">
        <el-autocomplete
          v-model="formData.entityName"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入"
          @select="handleSelect"
          @clear="handleClear"
          clearable
        >
        </el-autocomplete>
      </el-form-item>
      <el-form-item label="任务状态">
        <el-select
          v-model="formData.triggerState"
          placeholder="任务状态"
          clearable
        >
          <el-option
            v-for="(s, sidx) in listStatus"
            :key="'ls-' + sidx"
            :label="s.label"
            :value="s.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onQuery"
          >查询</el-button
        >
      </el-form-item>
      <!-- <el-form-item>
        <el-button
          type="primary"
          style="width: 1.4rem; height: 0.48rem"
          icon="el-icon-plus"
          >新增任务</el-button
        >
      </el-form-item> -->
    </el-form>
  </div>
</template>
  
<script>
import { getEntityTypes } from "@/api/tasklist.js";
export default {
  components: {},
  computed: {},
  data: () => {
    return {
      listStatus: [
        {
          label: "等待",
          value: "WAITING",
        },
        {
          label: "暂停",
          value: "PAUSED",
        },
        {
          label: "开始执行",
          value: "ACQUIRED",
        },
        {
          label: "错误",
          value: "ERROR",
        },
        {
          label: "执行中",
          value: "BLOCKED",
        },
      ],
      formData: {
        jobName: "",
        jobGroup: "",
        entityName: "",
        entityType: "",
        triggerState: "",
      },
    };
  },
  mounted() {},
  methods: {
    onQuery() {
      this.$emit("query", this.formData);
    },
    querySearchAsync(queryString, cb) {
      getEntityTypes({
        chineseName: queryString,
      })
        .then((res) => {
          // 新增一个 value 字段，值为 chineseName
          const modifiedData = res.map((item) => ({
            ...item, // 保留原有字段
            value: item.chineseName, // 新增 value 字段
          }));
          this.entityTypeList = modifiedData;
          cb(modifiedData);
        })
        .catch((err) => {});
    },
    handleSelect(item) {
      this.formData.entityName = item.chineseName;
      this.formData.entityType = item.name;
    },
    handleClear() {
      this.formData.entityName = "";
      this.formData.entityType = "";
    },
  },
};
</script>
  
  <style lang="less" scoped>
.list-query-con {
  display: block;
  height: 0.48rem;
  :deep(.el-form-item) {
    display: flex !important;
  }
  .list-query-form-inline {
    text-align: left;
    height: 0.48rem; /* 设置 Form 高度 */
    display: flex;
    :deep(.el-input__inner),
    :deep(.el-form-item__label),
    :deep(.el-form-item__content) {
      height: 0.48rem;
      line-height: 0.48rem;
      font-family: SourceHanSansCN;
      font-weight: 400;
      font-size: 0.18rem;
    }
    :deep(.el-button) {
      width: 1rem;
      height: 0.48rem;
      line-height: 0.48rem;
      padding: 0;
    }

    :deep(.el-form-item__label) {
      float: left !important;
    }
    :deep(.el-button--primary) {
      background: linear-gradient(90deg, #3364fe 0%, #5f9afe 100%);
      border-radius: 0.04rem;
      border-color: transparent;
      font-size: 0.18rem;
    }
  }
}
</style>
  